<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单：复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。案例：复选框</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="app02">
    <p>单个复选框: </p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>

    <p>多个复选框: </p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>

    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>

    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">Taobao</label>

    <br>
    <span>选择的值: {{checkedNames}}</span>

  </div>

  <script>
    // 复选框的双向数据绑定
    new Vue({
      el:'#app02',
      data:{
        checked:false,
        checkedNames:[]
      }
    });
  </script>

</body>
</html>
